<template>
    <div class="about">
        <y-header></y-header>
        <div v-loading="loading" element-loading-text="加载中..." style="min-height: 35vw;">
            <div class="banner">
                <div class="bg" ref="bg"
                     @mouseover="bgOver($refs.bg)" @mousemove="bgMove($refs.bg,$event)" @mouseout="bgOut($refs.bg)">
                    <transition name="fade">
                        <div style="position:absolute" @mouseover="stopTimer" @mouseout="startTimer">
                            <img class="img1"
                                 src="https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/57da8ad6332a7bd13f36b5fddef7235b.png"/>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
        <div class="box-card">
            <div class="gray-box">
                <div class="gallery-wrapper">
                    <div class="gallery">
                        <div class="thumbnail">
                        </div>
                        <div class="thumb">
                            <div class="big">
                                <img src="https://liquidation-1.oss-cn-hangzhou.aliyuncs.com/7d2f5a4a6716e4d901e9b435003348af.png"
                                     alt="破产流程">
                            </div>
                        </div>
                    </div>
                </div>
                <!--右边-->
                <div class="banner">
                    <div class="sku-custom-title">
                        <h4>公司介绍</h4>
                        <h6>
                        </h6>
                    </div>
                    <div class="num">
                        <span class="params-name">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;杭州法汇数据科技有限公司，简称“法汇数据”，是专注于社会化纠纷化解技术方案提供和法律咨询的司法科技服务商。目前“法汇数据”是工商银行融e联“破产清算管理平台”指定运营商和中钞区块链技术研究院络谱平台合作方，也是小股东权益集合类投票征集托管系统的开发方和运营商。
                        </span>
                    </div>
                    <div class="num">
                        <span class="params-name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;法汇数据科技有限公司是技术服务、技术开发和技术服务的提供等数据技术。自成立以来，始终坚持自主研发，致力于为大众提供最便利的平台服务和信息咨询，为大众在数据评估、经济信息咨询、企业信用征集上日益增长的网络需求，提供高品质、高性能的全面解决方案。</span>
                    </div>
                </div>
            </div>
        </div>
        <y-footer></y-footer>
    </div>
</template>
<script>
    import YHeader from './common/header'
    import YFooter from './common/footer'
    import YShelf from '../components/shelf'
    import product from '../components/product'
    import mallGoods from '../components/mallGoods'
    import mallGoods1 from '../components/mallGoods1'
    // @ is an alias to /src
    export default {
        name: 'about',
        data() {
            return {
                error: false,
                mark: 0,
                bgOpt: {
                    px: 0,
                    py: 0,
                    w: 0,
                    h: 0
                },
                loading: false,
                notify: '1',
                dialogVisible: false,
                timer: ''
            }
        },
        components: {
            YHeader,
            YFooter,
            YShelf,
            product,
            mallGoods,
            mallGoods1
        },
        methods: {
            autoPlay() {

            },
            play() {
                // 每2.5s自动切换
                this.timer = setInterval(this.autoPlay, 2500)
            },
            change(i) {
                this.mark = i
            },
            startTimer() {
                this.timer = setInterval(this.autoPlay, 2500)
            },
            stopTimer() {
                clearInterval(this.timer)
            },
            linkTo(item) {
                if (item.type === 0 || item.type === 2) {
                    // 关联商品
                    this.$router.push({
                        path: item.productId
                    })
                } else {
                    // 完整链接
                    window.location.href = item.fullUrl
                }
            },
            bgOver(e) {
                this.bgOpt.px = e.offsetLeft
                this.bgOpt.py = e.offsetTop
                this.bgOpt.w = e.offsetWidth
                this.bgOpt.h = e.offsetHeight
            },
            bgMove(dom, eve) {
                let bgOpt = this.bgOpt
                let X, Y
                let mouseX = eve.pageX - bgOpt.px
                let mouseY = eve.pageY - bgOpt.py
                if (mouseX > bgOpt.w / 2) {
                    X = mouseX - (bgOpt.w / 2)
                } else {
                    X = mouseX - (bgOpt.w / 2)
                }
                if (mouseY > bgOpt.h / 2) {
                    Y = bgOpt.h / 2 - mouseY
                } else {
                    Y = bgOpt.h / 2 - mouseY
                }
                dom.style['transform'] = `rotateY(${X / 50}deg) rotateX(${Y / 50}deg)`
                dom.style.transform = `rotateY(${X / 50}deg) rotateX(${Y / 50}deg)`
            },
            bgOut(dom) {
                dom.style['transform'] = 'rotateY(0deg) rotateX(0deg)'
                dom.style.transform = 'rotateY(0deg) rotateX(0deg)'
            }
        },
        mounted() {
        },
        created() {
            this.play()
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import "../assets/style/mixin";

    .about {
        display: flex;
        flex-direction: column;
    }

    .no-info {
        padding: 100px 0;
        text-align: center;
        font-size: 30px;
        display: flex;
        flex-direction: column;

        .no-data {
            align-self: center;
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to {
        opacity: 0;
    }

    .page {
        position: absolute;
        width: 100%;
        top: 470px;
        z-index: 30;

        .dots {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            .dot-active {
                display: inline-block;
                width: 15px;
                height: 15px;
                background-color: whitesmoke;
                border-radius: 8px;
                margin-right: 10px;
                cursor: pointer;
            }

            .dot {
                opacity: 0.2;
            }
        }
    }

    .activity-panel {
        width: 1220px;
        margin: 0 auto;

        .box {
            overflow: hidden;
            position: relative;
            z-index: 0;
            margin-top: 25px;
            box-sizing: border-box;
            border: 1px solid rgba(0, 0, 0, .14);
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);
        }

        .content {
            float: left;
            position: relative;
            box-sizing: border-box;
            width: 25%;
            height: 200px;
            text-align: center;
        }

        .content ::before {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            box-sizing: border-box;
            border-left: 1px solid #f2f2f2;
            border-left: 1px solid rgba(0, 0, 0, .1);
            width: 100%;
            height: 100%;
            content: "";
            pointer-events: none;
        }

        .i {
            width: 305px;
            height: 200px;
        }

        .cover-link {
            cursor: pointer;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 4;
            background: url() repeat;
        }

        a {
            color: #5079d9;
            cursor: pointer;
            transition: all .15s ease-out;
            text-decoration: none;
        }

        a:hover {
            box-shadow: inset 0 0 38px rgba(0, 0, 0, .08);
            transition: all .15s ease;
        }
    }

    .banner, .banner span, .banner div {
        font-family: "Microsoft YaHei";
        transition: all .3s;
        transition-timing-function: linear;
    }

    .banner {
        cursor: pointer;
        perspective: 3000px;
        position: relative;
        z-index: 19;
        margin: 0 auto;
        width: 1220px;
    }

    .bg {
        position: relative;
        width: 1220px;
        height: 500px;
        margin: 20px auto;
        background-size: 100% 100%;
        border-radius: 10px;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        transform: rotateY(0deg) rotateX(0deg);

        & div {
            position: relative;
            height: 100%;
            width: 100%;
        }
    }

    .img1 {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 10px;
    }

    .img2 {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 5px;
        left: 0;
        background-size: 95% 100%;
        border-radius: 10px;
    }

    .img3 {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 10px;
    }

    .a {
        z-index: 20;
        transform: translateZ(40px);
    }

    .b {
        z-index: 20;
        transform: translateZ(30px);
    }

    .c {
        transform: translateZ(0px);
    }

    .sk_item {
        width: 170px;
        height: 225px;
        padding: 0 14px 0 15px;

        > div {
            width: 100%;
        }

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all .3s;

            &:hover {
                transform: translateY(-5px);
            }
        }

        img {
            width: 130px;
            height: 130px;
            margin: 17px 0;
        }

        .sk_item_name {
            color: #999;
            display: block;
            max-width: 100%;
            _width: 100%;
            overflow: hidden;
            font-size: 12px;
            text-align: left;
            height: 32px;
            line-height: 16px;
            word-wrap: break-word;
            word-break: break-all;
        }

        .sk_item_price {
            padding: 3px 0;
            height: 25px;
        }

        .price_new {
            font-size: 18px;
            font-weight: 700;
            margin-right: 8px;
            color: #f10214;
        }

        .price_origin {
            color: #999;
            font-size: 12px;
        }
    }

    .box {
        overflow: hidden;
        position: relative;
        z-index: 0;
        margin-top: 29px;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, .14);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);

    }

    ul.box {
        display: flex;

        li {
            flex: 1;

            img {
                display: block;
                width: 305px;
                height: 200px;
            }
        }
    }

    .mt30 {
        margin-top: 30px;
    }

    .hot {
        display: flex;

        > div {
            flex: 1;
            width: 25%;
        }
    }

    .floors {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .imgbanner {
            width: 50%;
            height: 430px;

            .cover-link {
                cursor: pointer;
                display: block;
                position: absolute;
                top: 60px;
                left: 0;
                width: 50%;
                height: 430px;
                z-index: 4;
                background: url() repeat;
            }

            .cover-link:hover {
                box-shadow: inset 0 0 38px rgba(0, 0, 0, .08);
                transition: all .15s ease;
            }
        }

        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    .box-card {
        clear: both;
        width: 1220px;
        min-height: 400px;
        padding: 0 0 25px;
        margin: 0 auto;
    }

    .gray-box {
        display: flex;
        padding: 60px;
        margin: 20px 0;

        .gallery-wrapper {
            .gallery {
                display: flex;
                width: 540px;

                .thumbnail {
                    li:first-child {
                        margin-top: 0px;
                    }

                    li {
                        @include wh(80px);
                        margin-top: 10px;
                        padding: 12px;
                        border: 1px solid #f0f0f0;
                        border: 1px solid rgba(0, 0, 0, .06);
                        border-radius: 5px;
                        cursor: pointer;

                        &.on {
                            padding: 10px;
                            border: 3px solid #ccc;
                            border: 3px solid rgba(0, 0, 0, .2);
                        }

                        img {
                            display: block;
                            @include wh(100%);
                        }
                    }
                }

                .thumb {
                    .big {
                        margin-left: 20px;
                    }

                    img {
                        display: block;
                        @include wh(440px)
                    }
                }
            }
        }

        // 右边
        .banner {
            width: 450px;
            margin-left: 10px;

            h4 {
                font-size: 24px;
                line-height: 1.25;
                color: #000;
                margin-bottom: 13px;
            }

            h6 {
                font-size: 14px;
                line-height: 1.5;
                color: #bdbdbd;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .sku-custom-title {
                overflow: hidden;
                text-align: center;
                padding: 8px 8px 18px 10px;
                position: relative;
            }

            .params-name {
                padding-right: 20px;
                font-size: 14px;
                color: #8d8d8d;
                line-height: 36px;
            }

            .num {
                padding: 29px 0 8px 10px;
                border-top: 1px solid #ebebeb;
                display: flex;
                align-items: center;
            }

            .buy {
                position: relative;
                border-top: 1px solid #ebebeb;
                padding: 30px 0 0 10px;
            }
        }
    }
</style>

